<template>
	<div class="order">
		<nav-tab activeColor="#3A3A3A">
			<header-item>
				<div class="header-nav1" slot="header-img" @click="saoma">
					<img src="@/assets/image/header/ew.png" />
					<div>扫一扫</div>
				</div>
				<div class="header-nav2" slot="header-sc" @click="search">
					<img src="@/assets/image/header/sc.png" />
					<input type="text" class="input" placeholder="今天股票又涨了" />
				</div>
				<div class="header-nav3" slot="header-xingx" @click="news">
					<img src="@/assets/image/header/xf.png">
					<div>消息</div>
				</div>
			</header-item>
		</nav-tab>

		<div class="gk">
			<ul class="guig">
				<li v-for="(item,index) in licaiArr" :key="index" class="li-item" >
					<img :src="item.img" />
					<div>{{item.name}}</div>
				</li>
			</ul>
		</div>
		
		<div class="kuai"><img src="@/assets/image/order/k.png"/></div>
		<div class="guanzu">
		<van-cell >
			<div slots="title" style="font-size: 16px;height:25px;line-height: 25px; display: inline-block;">我的关注(0)</div>
			<div slots="icon" style="display: inline-block;float: right;margin: 5px 5px;"><van-icon name="arrow" size="15px" /></div>
		</van-cell>
		<div class="daoru">
			<img src="@/assets/image/order/d1.png"/>
			<span>导入持仓</span>
		</div>
		<div class="noguanzu">
			<div>您还没有关注任何产品~</div>
			<div class="noguanzu-last">将持仓产品导入关注，可及时跟踪产品涨跌</div>
		</div>
		
		
		</div>
		
		<!-- 活期投资 -->
		<div class="tuijian">
		 <van-cell>
				   <div slot="title" class="tuijian-title">活期投资</div>
				   <div style="display: inline-block;float: right;margin: 5px 5px;"><van-icon name="arrow" size="15px" /></div>
		 </van-cell>
		 <div class="van-cardt" @click="details">
				   <div class="thumb-img">
					   <div>3.27<span>%</span></div>
					   <div class="nianh">上期年化</div>
				   </div>
				  <div class="thumb-right">
					  <div class="thumb-title">日益月鑫7天</div>
					  <div  class="desc">招行明星产品 5万起购 到期资金自动到账</div>
				  </div>
		 </div>
		 <div class="van-cardt" @click="details">
		 		   <div class="thumb-img">
		 			   <div>4.13<span>%</span></div>
		 			   <div class="nianh">近一年年化</div>
		 		   </div>
		 		  <div class="thumb-right">
		 			  <div class="thumb-title">天添金稳健型</div>
		 			  <div  class="desc">招行净值类明星理财 探索更高收益</div>
		 		  </div>
		 </div>
		</div>
		<!-- 短期投资 -->
		<div class="tuijian2">
		 <van-cell>
				   <div slot="title" class="tuijian-title">短期投资</div>
				   <div style="display: inline-block;float: right;margin: 5px 5px;"><van-icon name="arrow" size="15px" /></div>
		 </van-cell>
		 <div class="van-cardt" @click="details">
				   <div class="thumb-img">
					   <div>4.08<span>%</span></div>
					   <div class="nianh">上期年化</div>
				   </div>
				  <div class="thumb-right">
					  <div class="thumb-title">日益月鑫60天</div>
					  <div  class="desc">招行明星产品 5万起购 到期资金自动到账</div>
				  </div>
		 </div>
		 <div class="van-cardt" @click="details">
		 		   <div class="thumb-img">
		 			   <div>4.08<span>%</span></div>
		 			   <div class="nianh">上期年化</div>
		 		   </div>
		 		  <div class="thumb-right">
		 			  <div class="thumb-title">日益月鑫60天</div>
		 			  <div  class="desc">招行明星产品 5万起购 到期资金自动到账</div>
		 		  </div>
		 </div>
		</div>
		<!-- 长期投资 -->
		<div class="tuijian3">
		 <van-cell>
				   <div slot="title" class="tuijian-title">长期投资</div>
				   <div style="display: inline-block;float: right;margin: 5px 5px;"><van-icon name="arrow" size="15px" /></div>
		 </van-cell>
		 <div class="van-cardt" @click="details">
				   <div class="thumb-img">
					   <div>22.98<span>%</span></div>
					   <div class="nianh">上期年化</div>
				   </div>
				  <div class="thumb-right">
					  <div class="thumb-title">创金沪港深</div>
					  <div  class="desc">金牛基金经理管理 积极参与打新</div>
				  </div>
		 </div>
		 <div class="van-cardt" @click="details">
		 		   <div class="thumb-img">
		 			   <div>3.62<span>%</span></div>
		 			   <div class="nianh">上期年化</div>
		 		   </div>
		 		  <div class="thumb-right">
		 			  <div class="thumb-title">大摩强债基金</div>
		 			  <div  class="desc">一级债基 回撤控制好 反弹弹性足</div>
		 		  </div>
		 </div>
		</div>
		<!-- 理财主题 -->
		<div class="xingren">
				  <van-cell>
				  		   <div slot="title" class="xingren-title">理财主题</div>
						   <div style="display: inline-block;float: right;margin: 0px 5px;"><van-icon name="arrow" size="15px" /></div>
				  </van-cell>
				 <ul class="huadong">
					 <li v-for="item in 4" :key="item">
						 <div>新手有礼</div>
						 <div class="lis">80元现金礼券免费领</div>
					 </li>
				 </ul>
		</div>
		<!-- 底部导航 -->
		<main-tab-item></main-tab-item>
	</div>
</template>

<script>
	import NavTab from '@/components/navtar/Header.vue'
	import HeaderItem from '@/components/navtar/HeaderItem.vue'
	import { Cell, CellGroup,Icon  } from 'vant';
	import MainTabItem from '@/components/MainTabItem.vue'
	export default {
		name: 'Home',
		data(){
			return{
				licaiArr:[
					{id:1,name:'理财产品',img:require('@/assets/image/order/or1.png')},
					{id:2,name:'基金',img:require('@/assets/image/order/or2.png')},
					{id:3,name:'证券交易',img:require('@/assets/image/order/or3.png')},
					{id:4,name:'贵金属',img:require('@/assets/image/order/or4.png')},
					{id:5,name:'全部',img:require('@/assets/image/order/or5.png')},
				]
			}
		},
		methods:{
			search() {
				this.$router.push('/search')
			},
			saoma(){
				this.$router.push('/saoma')
			},
			news(){
				this.$router.push('/news')
			},
			details(){
				this.$router.push('/details')
			}
		},
		components: {
			NavTab,
			HeaderItem,
			[Cell.name]:Cell,
			[CellGroup.name]:CellGroup,
			[Icon.name]:Icon,
			MainTabItem
		}
	}
</script>
<style lang="less" scoped>
	@width:100vw;
	@mtop:9px;
	.order{
		padding-bottom: 60px;
		background-color:#F0F0F2 ;
	}
	.gk{
		margin-top: 45px;
	}
	.guig {
		width: @width;
		height: 100px;
		background-color:#3A3A3A;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		flex-wrap: wrap;

		.li-item {
			width:65px;
			height:77px;
			font-size: 13px;
			color: #A6A6A6;
			>img {
				width: 30px;
				height: 30px;
				margin-top:15px;
			}
		}
	}
	.kuai{
		width:@width;
		height: 100px;
		margin-top:9px ;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.guanzu{
		width: @width;
		height:232px ;
		background-color: #ffffff;
		margin-top: 9px;
	.daoru{
		width: 347px;
		height:68px;
		border: 1px dashed #BBBBBB;
		margin: 15px auto;
		text-align:center;
		display: flex;
		align-items: center;
		justify-content: center;
	img{
		width: 25px;
		height: 25px;
		margin-right: 10px;
	}
	span{
		font-size: 18px;
		color: #0084DC;
	}
    	}
	
	.noguanzu{
		width: @width;
		height:75px ;
	    font-size: 16px;
		color:#101010 ;
		flex-direction: column;
		display: flex;
		align-items: center;
		justify-content: center;
	
		.noguanzu-last{
			font-size: 14px;
			color:#969696 ;
			margin-top: 5px;
		}
	}
	 
	}
	
	.tuijian{
		width: @width;
		height: 220px;
		margin-top: @mtop;
		background-color: white;
		margin-bottom:55px;
		border-bottom: 1px solid #f2f2f2;
		.tuijian-title{
			font-size: 15px;
			padding:10px 0px;
		     &::before{
				 content: "";
				 width: 15px;
				 height: 15px;
				 background-color: #00CEF0;
				 display:inline-block;
				 border-radius: 50%;
				 margin-right: 10px;
			 }
		}
		
		.van-cardt{
			height:100px;
			// margin-top: 20px;
		    color: #323233;
		    font-size: 0.16rem;
		    background-color: #ffffff;
			display: flex;
			border-bottom: 1px solid #f2f2f2;
		 .thumb-img{
			 width:100px;
			 text-align: center;
			 font-size: 24px;
			 color: #FC505F;
		     padding-top:22px;
			 span{
				 font-size: 12px;
			 }
			 .nianh{
				 font-size: 12px;
			 }
		 }
		 .thumb-right{
			     padding-left: 10px;
				 padding-right: 25px;
				 box-sizing: border-box;
				 flex: 1;
				 display: flex;
				 flex-direction: column;
				 justify-content: center;
			 .thumb-title{
			 	   font-size:16px;
				   color: #383838;
			  }
			 .desc{
				margin-top: 10px;
			 	font-size: 14px;
				color: #999999;
			   }
		 }
		}
		
	}
	
	// 短期投资
	.tuijian2{
		width: @width;
		height: 220px;
		margin-top: @mtop;
		background-color: white;
		margin-bottom:55px;
		border-bottom: 1px solid #f2f2f2;
		.tuijian-title{
			font-size: 15px;
			padding:10px 0px;
		     &::before{
				 content: "";
				 width: 15px;
				 height: 15px;
				 background-color: #8BA1EA;
				 display:inline-block;
				 border-radius: 50%;
				 margin-right: 10px;
			 }
		}
		
		.van-cardt{
			height:100px;
			// margin-top: 20px;
		    color: #323233;
		    font-size: 0.16rem;
		    background-color: #ffffff;
			display: flex;
			border-bottom: 1px solid #f2f2f2;
		 .thumb-img{
			 width:100px;
			 text-align: center;
			 font-size: 24px;
			 color: #FC505F;
		     padding-top:22px;
			 span{
				 font-size: 12px;
			 }
			 .nianh{
				 font-size: 12px;
			 }
		 }
		 .thumb-right{
			     padding-left: 10px;
				 padding-right: 25px;
				 box-sizing: border-box;
				 flex: 1;
				 display: flex;
				 flex-direction: column;
				 justify-content: center;
			 .thumb-title{
			 	   font-size:16px;
				   color: #383838;
			  }
			 .desc{
				margin-top: 10px;
			 	font-size: 14px;
				color: #999999;
			   }
		 }
		}
		
	}
	// 长期投资
	.tuijian3{
		width: @width;
		height: 220px;
		margin-top: @mtop;
		background-color: white;
		margin-bottom:55px;
		border-bottom: 1px solid #f2f2f2;
		.tuijian-title{
			font-size: 15px;
			padding:10px 0px;
		     &::before{
				 content: "";
				 width: 15px;
				 height: 15px;
				 background-color: #FE8EE9;
				 display:inline-block;
				 border-radius: 50%;
				 margin-right: 10px;
			 }
		}
		
		.van-cardt{
			height:100px;
			// margin-top: 20px;
		    color: #323233;
		    font-size: 0.16rem;
		    background-color: #ffffff;
			display: flex;
			border-bottom: 1px solid #f2f2f2;
		 .thumb-img{
			 width:100px;
			 text-align: center;
			 font-size: 24px;
			 color: #FC505F;
		     padding-top:22px;
			 span{
				 font-size: 12px;
			 }
			 .nianh{
				 font-size: 12px;
			 }
		 }
		 .thumb-right{
			     padding-left: 10px;
				 padding-right: 25px;
				 box-sizing: border-box;
				 flex: 1;
				 display: flex;
				 flex-direction: column;
				 justify-content: center;
			 .thumb-title{
			 	   font-size:16px;
				   color: #383838;
			  }
			 .desc{
				margin-top: 10px;
			 	font-size: 14px;
				color: #999999;
			   }
		 }
		}
		
	}
	// 理财主题
	.xingren{
	 		width: @width;
			height:249px;
			background: #FFFFFF;
			margin-top:16px;
			box-sizing: border-box;
			.xingren-title{
				font-size:16px;
				color: #383838;
				height: 25px;
				line-height: 25px;
			}
	 	 .huadong{
			 width:@width;
			 height: 90px;
			 color: white;
			 font-size: 21px;
			 margin-top: -10px;
			 text-align: center;
			 li{
				 width: 170px;
				 height:100px;
				 background-color: #AB483C;
			     padding-top: 20px;
				 box-sizing: border-box;
				 display: inline-block;
				 margin: 2px;
				 .lis{
					 font-size: 14px;
				 }
			 }
		  }
		}
</style>
